<template>
  <el-popover
    ref="openLog"
    placement="bottom"
    title="用户头像"
    trigger="click">
    <div style="max-width:500px;max-height:380px;overflow:auto;display: flex; flex-direction: column">
      <div  style="width:100%;height:100%;overflow:auto;display: flex;"><img :src="newImg" style="width:100%;height:100%" @error="imgError()"></div>
      <div style="padding: 5px 0px;align-self: flex-end;" v-show="showEdit">
        <el-button type="success" size="mini" @click="selectHeadImg">更换头像</el-button>
        <el-button type="primary" size="mini" @click="changeUserHeadImg">保存</el-button>
      </div>
    </div>
    <img :src="oldImg" :style="{width: imgSize + 'px', height: imgSize + 'px', borderRadius: '50%', cursor: 'pointer'}" slot="reference" @error="imgError()">
  </el-popover>
</template>

<script>
  import localImg from '../../../static/img/headimg.jpg'
  export default {
      name: 'headImg',
      props: ['imgUrl', 'showEdit', 'size'],
      data: function () {
          return {
              newImg: this.imgUrl,
              oldImg: this.imgUrl,
              imgSize: this.size || 60
          }
      },
      methods: {
          selectHeadImg () {
              const dialog = require('electron').remote.dialog
              dialog.showOpenDialog({
                  filters: [
                      {name: 'Images', extensions: ['jpg', 'jpeg', 'png', 'gif']}
                  ]
              }, (files) => {
                  if (files) {
                      let img = files[0]
                      this.newImg = img
                  } 
              })
          },
          changeUserHeadImg () {
              this.$emit('submit')
              this.oldImg = this.newImg
          },
          imgError () {
              this.newImg = localImg
              this.oldImg = localImg
          }
      },
      watch: {
          imgUrl: function () {
              this.newImg = this.imgUrl
              this.oldImg = this.imgUrl
          }
      }
  }
</script>

<style scoped>
  
</style>
